"use client";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  SheetFooter,
  SheetClose,
} from "@/components/ui/sheet";
import { trpc } from "@/app/_trpc/client";
import { useEffect, useState } from "react";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";

import { z } from "zod";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { useToast } from "@/components/ui/use-toast";
import { AREAS } from "@/helpers/validators";
import useFormHandler from "@/hooks/useFormHandler";
import Loading from "@/components/Loading";
import {
  areaStatusEnum,
  Project,
  ProjectDetail,
} from "@/server/project/domain/models";
import { projectAreaSchema } from "@/lib/schemas/projectAreaSchema";
import { MdModeEdit } from "react-icons/md";
import useAreaForm from "../hooks/useAreaForm";

interface EditValues {
  id: string;
  width?: number;
  length?: number;
  floorId: string;
  type?: string;
  projectId: string;
  projectName: string;
  quantity?: number;
}

interface AreaFormProps {
  project: ProjectDetail;
  isEdit?: boolean;
  editValues?: EditValues;
}

const AreaFormSidebar = ({ project, isEdit, editValues }: AreaFormProps) => {
   const {   open,
    setOpen,
    form,
    isInputChanged,
    isPendingCreateArea,
    isPendingUpdateArea,
    onSubmit,
    isCustomArea,
    resetCustomArea}=useAreaForm({project,isEdit,editValues})

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        {isEdit ? (
          <MdModeEdit className="text-2xl text-primary " />
        ) : (
          <Button
            variant="outline"
            size="sm"
            className=" rounded-full text-white bg-primary"
          >
            Crear area
          </Button>
        )}
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>{isEdit ? "Editar area" : "Crear area"}</SheetTitle>
          <SheetDescription>
            Define la cantidad de material usados.
          </SheetDescription>
        </SheetHeader>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)}>
            <div className="grid gap-4 py-4 mt-10">
              <FormField
                control={form.control}
                defaultValue={project?.name!}
                name="projectName"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Projecto</FormLabel>
                    <FormControl>
                      <Input disabled placeholder="Ej: projecto" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="floorId"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Piso</FormLabel>
                    <Select
                      onValueChange={(val) => field.onChange(val)}
                      defaultValue={field?.value}
                    >
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Seleccione el numero de piso" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {project?.floor?.map((floor) => (
                          <SelectItem key={floor?.id} value={`${floor?.id}`}>
                            {floor?.name}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="length"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Longitud</FormLabel>
                    <FormControl>
                      <Input
                        min={0}
                        type="number"
                        step="0.1"
                        placeholder="Ej: 8.5"
                        {...field}
                      />
                    </FormControl>

                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="width"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Ancho</FormLabel>
                    <FormControl>
                      <Input
                        min={0}
                        type="number"
                        step="0.1"
                        placeholder="Ej: 2.5"
                        {...field}
                      />
                    </FormControl>

                    <FormMessage />
                  </FormItem>
                )}
              />

              {isCustomArea ? (
                <FormField
                  control={form.control}
                  name="type"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Area</FormLabel>
                      <div className="flex gap-1">
                        <FormControl>
                          <Input placeholder="ej: metro" {...field} />
                        </FormControl>
                        <Button
                          className="text-xs bg-yellow-500"
                          type="button"
                          onClick={resetCustomArea}
                        >
                          Resetear
                        </Button>
                      </div>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              ) : (
                <FormField
                  control={form.control}
                  name="type"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Area</FormLabel>
                      <Select
                        onValueChange={field.onChange}
                        defaultValue={field.value}
                      >
                        <FormControl>
                          <SelectTrigger>
                            <SelectValue placeholder="Seleccione el tipo de area" />
                          </SelectTrigger>
                        </FormControl>
                        <SelectContent>
                          {AREAS.map((area) => (
                            <SelectItem key={area?.label} value={area.label}>
                              {area.label}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              )}

              {isEdit && (
                <FormField
                  control={form.control}
                  name="status"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel>Estado</FormLabel>
                      <FormControl>
                        <Select
                          onValueChange={field.onChange}
                          defaultValue={field.value as any}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select a priority" />
                          </SelectTrigger>
                          <SelectContent>
                            {areaStatusEnum.map((option) => (
                              <SelectItem key={option} value={option}>
                                {option}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </FormControl>

                      <FormMessage />
                    </FormItem>
                  )}
                />
              )}
            </div>

            <SheetFooter>
              <Button
                disabled={
                  !isInputChanged || isPendingCreateArea || isPendingUpdateArea
                }
                className="space-x-2"
                type="submit"
              >
                <span className="mr-2">
                  {isPendingCreateArea || isPendingUpdateArea
                    ? "Cargando"
                    : isEdit
                    ? "Editar"
                    : "Crear"}
                </span>
                {isPendingCreateArea || isPendingUpdateArea ? (
                  <Loading size={15} />
                ) : null}
              </Button>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  );
};

export default AreaFormSidebar;